<template>
    <div>
        <div class="footer"></div>
        <van-tabbar v-model="active" active-color="#ee0a24" inactive-color="#000" route>
            <van-tabbar-item icon="wap-home" >首页</van-tabbar-item>
            <van-tabbar-item icon="coupon-o" >全部分类</van-tabbar-item>
            <van-tabbar-item icon="like-o" >关注</van-tabbar-item>
            <van-tabbar-item icon="friends-o" >我的</van-tabbar-item>
        </van-tabbar>
    </div>

</template>

<script>
import Vue from 'vue';
import { Tabbar, TabbarItem } from 'vant';

Vue.use(Tabbar);
Vue.use(TabbarItem);
export default {
    data() {
        return {
            active: 0,
        }
    },
    methods: {
       
    }
}
</script>

<style scoped>
.van-tabbar {
    display: flex;
    position: fixed;
    bottom: 0;
}

.footer {
    width: 100%;
    height: 1rem;
}

.van-tabbar a {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.van-tabbar-item {
    flex: 1;
}
</style>